<template>
	<view class="city-container">
		<view class="city-title" v-for="item in citys" :key="item.title">
		<view style="margin-bottom: 10px;font-size: 18px;">{{item.title}}</view>
		<view class="city-count">
			<view class="city-children" v-for="item in item.children">
					<view>
						{{item.city_name}}
				</view>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				citys:[]
			};
		},
		onLoad() {
			uni.request({
				url:'http://129.211.169.131:6368/citys',
				success: (res) => {
					console.log(res);
					// 1.先获取所有首字母
					let titleArr = res.data.map((item)=>item.city_pre.toUpperCase())
					// 去重,set去重后一个伪数组,实质是一个对象
					titleArr =  [...new Set(titleArr)]
					titleArr.sort()
					// console.log(titleArr);
					let newArr = titleArr.map((item)=>{
						return {title:item,children:[]}
					})
					// 2. 循环大数组
					for(let obj of res.data){
						/* 
							city_name: "上海"
							city_pinyin: "Shanghai"
							city_pre: "S"
							city_short: "sh"
							count: "316"
							id: "1"
						 */
						
						for(let dataobj of newArr){
							if(obj.city_pre == dataobj.title){
								dataobj.children.push(obj)
							}
						}
					}
					this.citys = newArr
					console.log(newArr);
				}
			})
		},
	}
</script>

<style lang="scss">
.city-container{
	background-color: #f5f5f5;
	.city-title{
		padding: 15px;
		box-sizing: border-box;
		.city-count{
			display: flex;
			background: #fff;
			padding: 15px;
			box-sizing: border-box;
			flex-wrap: wrap;
			text-align: center;
			align-items: center;
			.city-children{
				width: 25%;
				margin: 10px;
			}
		}
		
	}
}
</style>
